<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="test"></div>

		<!-- 引入react核心库 -->
		<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入react-dom 用于支持react操作dom -->
		<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入babel，用于将jsx转化成js。浏览器只识别js，不识别jsx -->
		<script src="js/17.0.1/babel.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- 此处一定要写babel -->
		<script type="text/babel">
			const data = ['anglur','vue','react']
			// 创建虚拟DOM //此处一定不要写引号，不是字符串
			
			const VDOM = (
			<div>
				<h1>hello react</h1>
				{//只能写有返回值的表达式，如map。js语句如for循环，会报错
					data.map((item,index) => {
						return <li key={index}>{item}</li>
					})
				}
			</div>
			)
			
			// 渲染虚拟DOM到页面
			ReactDOM.render(VDOM,document.getElementById('test'))
		</script>

	</body>
</html>
